<template>
  <view>
    <!-- #ifdef APP-PLUS |H5 -->
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <!-- <view class="status_bar"></view> -->
    <!-- #endif -->
    <view
      class="my_navbar"
      :style="{
        position: fixed == true ? 'fixed' : '',
        background: background,
        height: height + 'rpx',
      }"
    >
      <view class="left_area" @click="leftClick">
        <text
          :class="leftIcon"
          class="custom-icon"
          v-if="leftIcon"
          style="font-size: 32rpx; font-weight: 600"
          :style="{ color: leftIconColor }"
        ></text>
        <text class="left_text">
          {{ leftText }}
        </text>
      </view>
      <view class="center-area">
        {{ title }}
      </view>

      <view class="right_area" @click="rightClick">
        <!-- <text :class="rightIcon" class="custom-icon"></text> -->
        <image
          v-if="rightIcon"
          class="right_icon"
          :src="'../../static/image/' + rightIcon + '.png'"
          mode="aspectFill"
        ></image>
        <text style="line-height: 2" :style="{ color: rightColor }">{{
          rightText
        }}</text>
      </view>
    </view>
    <!-- <view class="my_navbar"></view> -->
    <view class="navbar_height"></view>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  props: {
    fixed: {
      type: Boolean,
      default: true,
    },
    leftText: {
      type: String,
      default: "返回",
    },
    leftIcon: {
      type: String,
      default: "custom-icon-jiantou2",
    },
    title: {
      type: String,
      default: "",
    },
    rightText: {
      type: String,
      default: "",
    },
    rightIcon: {
      type: String,
      default: "",
    },
    rightColor: {
      type: String,
      default: "#6CB19B",
    },
    background: {
      type: String,
      default: "#F6F6F7",
    },
    leftIconColor: {
      type: String,
      default: "",
    },
    height: {
      type: Number,
      default: 80,
    },
  },
  methods: {
    leftClick() {
      this.$emit("leftClick");
    },
    rightClick() {
      this.$emit("rightClick");
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar_height {
  // #ifdef APP-PLUS
  height: calc(100rpx + var(--status-bar-height));
  // #endif
  // #ifndef APP-PLUS
  height: 100rpx;
  // #endif
}

.my_navbar {
  font-family: PingFang SC;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  z-index: 9;
  border-bottom: 1rpx solid #e1e1e1;
  background: #fff;
  position: relative;
  // #ifdef APP-PLUS
  top: calc(100rpx + var(--status-bar-height));
  // #endif
  .custom-icon {
    font-size: 20px;
  }

  .left_area {
    display: flex;
    align-items: center;
    font-family: PingFang SC;
  }

  .center-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  .left_text {
    display: inline-block;
    padding-left: 10px;
    font-weight: bold;
    font-size: 32rpx;
  }

  .right_icon {
    width: 40rpx;
    height: 40rpx;
  }

  .custom-icon-jiantou2 {
    font-size: 50rpx;
    color: black;
    height: 52rpx;
    line-height: 56rpx;
  }
}
</style>
